<template>
	<div class="bgimg">
		<div class="login">
			<div class="logo">
				<img src="../assets/logo.png" style="width:60px;vertical-align: middle;" >
				<p style="display: inline-block;vertical-align: middle;font-size:25px;font-family:楷体">DD聊天</p>
			</div>
			<div class="form">
				<el-form 
				:model="userName"
				:rules="rule"
				status-icon
				ref="userName"
				>
                <el-form-item prop="tel"  style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-phone-outline" v-model="userName.tel" placeholder="请输入手机号" maxlength="11" show-word-limit></el-input>
				</el-form-item>
				<el-form-item prop="name"  style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-user" v-model="userName.name" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item prop="pass" style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-lock" v-model="userName.pass" placeholder="请输入密码" type=passwrod show-password></el-input>
				</el-form-item>
				<el-form-item prop="pass1" style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-lock" v-model="userName.pass1" placeholder="再次输入密码" type=passwrod show-password></el-input>
				</el-form-item>
				<!-- <div style="left:20%;position:relative;">
					<div style="position:absolute;">
						<el-radio v-model="userName.radio" label="1">男</el-radio>
						<el-radio v-model="userName.radio" label="2">女</el-radio>
					</div>
					<div style="position:relative;left:35%;width:78px">
						<el-tooltip content="上传头像" >
							<upload @input="getPath"></upload>
						</el-tooltip>
					</div>
				</div> -->
				<el-form-item class="bottun">
				    <el-button type="primary" style="width:100%;left:40%;position:relative;" @click="doRegister('userName')">注册</el-button>          
                    <p style="left:40%;position:relative;cursor:pointer;" class="l" @click="dologin()" >已有账号，立即登录</p>
               </el-form-item>
				</el-form>
			</div>
			 
		</div>
	</div>
</template>

<script>
import upload from '../components/upload.vue'
export default{
	components:{upload},
	data(){
	let validateTel=(rule,value,callback) =>{
      if(value===''){
        callback(new Error('请输入手机号'))
      }else if(!this.checkTel(value)){
        callback(new Error('手机号码非法'))
      }else{
		callback()
	  }
    };
    let validatePass=(rule,value,callback) =>{
    if(value===''){
        callback(new Error('请输入密码'))
    }else if(!this.checkPassword(value)){
         callback(new Error("密码至少包含数字和英文,长度6-20"))
    }else{
		if (this.userName.pass1 !== "") {
          this.$refs.userName.validateField("pass1");
        }
		callback()
	  }
    };
 let validatePass1=(rule,value,callback) =>{
    if (value === "") {
        callback(new Error("请再次输入密码"));
       } else if (value !== this.userName.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
		return{
			imgPath:'',
			userName:{
                tel:'',
				name:'',
				pass:'',
				pass1:'',
			},
			rule:{
                tel:[{validator:validateTel,trigger: 'change'}],
                name:[{required: true, message: '请输入用户名', trigger: 'change'},
				{ min: 2, max: 6, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				pass:[{validator:validatePass,trigger: 'change'}],
				pass1:[{validator:validatePass1,trigger:'change'}]
			
			},
			identifyCode:'',
			identifyCodes:"123456789abcdwerwshdjeJKDHRJHKPLMKQ"
		}
	},
    mounted() {
		
	},
	methods: {
		getPath(imageUrl){
			this.imgPath = imageUrl
		},
		doRegister(formName){
			let form = {
				userName : this.userName.name,
				tel : this.userName.tel,
				password : this.userName.pass,
				password1 : this.userName.pass1,
			}
			this.$refs[formName].validate((valid) => {
				if(valid){
					this.$axios.post('/api/register',form).then((resp) =>{
						if(resp.code == 200){
						this.$message.success(resp.msg)
						this.$router.push('/login')
						}else{
							this.$message.error(resp.msg)
						}
					})
				}
			})
        },
        dologin(){
            this.$router.replace('/login')
        },
        checkTel(num){
            let reg =/^1[3|4|5|7|8][0-9]{9}$/
            if(reg.test(num)){
                return true
            }else{
                return false
            }
        },
        checkPassword(str){
            let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
            if(reg.test(str)) {
                return true;
            }else{
                return false;
            }
        },
	}
}
</script>


<style scoped>
	.bgimg {
		position: absolute;
		background: url(../assets/bg.png) no-repeat center;
		height: 100%;
		width: 100%;
		background-size: cover;
	}
	.login{
		width: 400px;
		height: 510px;      
		position: fixed;
		left: 50%;
		top: 50%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color:white;
		transform: translate(-50%,-50%);
	}
	.logo{
		position: relative;
		left: 30%;
	}
	.get-code{
		left: 51%;
		position: absolute;
		top: 6%;
		cursor: pointer;
		box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.bottun{
		left: 20%;
		position: absolute;
	}
    .l:hover{
        color: #2c2fd6;
    }

</style>
